<template>
  <div id="Order">
    <div id="inp">
      <div id="inps">
        订单号
        <span
          ><el-input v-model="input" placeholder="请输入内容"></el-input
        ></span>
        收货人
        <span
          ><el-input v-model="input" placeholder="请输入内容"></el-input
        ></span>
        手机号
        <span
          ><el-input v-model="input" placeholder="请输入内容"></el-input
        ></span>
        订单状态
        <span
          ><el-select v-model="input" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        ></span>
      </div>
      <!-- 选择日期 -->
      <div id="ChooseData">
        <span class="demonstration">选择时间&emsp;</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>

        <el-button type="primary">查询</el-button>
      </div>
      <!-- 选择日期 -->
    </div>
    <div id="orderList"></div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="订单号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="下单时间" width="180">
      </el-table-column>
      <el-table-column prop="address" label="手机号"> </el-table-column>
      <el-table-column prop="address" label="收货人"> </el-table-column>
      <el-table-column prop="address" label="配送地址"> </el-table-column>
      <el-table-column prop="address" label="送达时间"> </el-table-column>
      <el-table-column prop="address" label="用户备注"> </el-table-column>
      <el-table-column prop="address" label="订单金额"> </el-table-column>
      <el-table-column prop="address" label="订单状态"> </el-table-column>

      <el-table-column label="操作" class="btns">
        <el-button type="primary" size="mini" plain>查看</el-button>
        <el-button type="primary" size="mini" plain>编辑</el-button>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "未受理",
        },{
          value: "选项2",
          label: "已受理",
        }
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="less" scoped>
#Order {
  display: flex;
  flex-direction: column;
  width: 100%;
  #inp {
    width: 100%;
    height: 180px;
    // background-color: paleturquoise;
    #inps {
      width: 100%;
      height: 75px;
      // background-color: palevioletred;
      display: flex;
      align-items: center;
      span {
        display: flex;
        width: 15%;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    #ChooseData {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      button {
        margin-left: 10px;
      }
    }
  }
  .btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .block {
    margin-top: 20px;
  }
}
</style>